<template>
  <div class="login">
      <div class="login-container">
          <P class="title">用户登录</P>
          <el-form :model="loginModel">
            <el-row>
              <el-col :span="22">
                <el-form-item label="" style="margin-left:35px;">
                  <div class="icon_user"></div>
                  <el-input class='login_input' placeholder="邮箱" v-model="loginModel.account" clearable>
                  </el-input>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="22">
                <el-form-item label="" style="margin-left:35px;">
                  <div class="icon_password"></div>
                  <el-input class='login_input' placeholder="密码" v-model="loginModel.password" clearable type="password" @keyup.enter.native="login">
                  </el-input>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="22">
                <el-form-item label="" style="margin-left:35px;">
                  <el-button type="primary" style="width:100%;" @click="login">登录</el-button>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="22">
                <el-form-item label="" style="margin-left:35px;">
                  <p class="forget" @click="ForgetPassword">忘记密码了</p>
                </el-form-item>
              </el-col>
            </el-row>
          </el-form>
        </div>
  </div>
</template>
<script>
import { encryptedString, RSAKeyPair, setMaxDigits } from '../../static/js/RSA.js'
import { mapActions } from 'vuex'
export default {
  data () {
    return {
      loginModel: {
        account: null,
        password: null,
        key: null
      },
      rsaModel: {
        publicKeyExponent: null,
        publicKeyModulus: null,
        key: null
      }
    }
  },
  methods: {
    ...mapActions([
      'setUserInfo'
    ]),
    login () {
      let self = this
      if (this.loginModel.account === null && this.loginModel.password === null) {
        this.$message.error('请输入登录账号和密码')
      } else if (this.loginModel.account === null || this.loginModel.account === '') {
        this.$message.error('请输入登录账号')
      } else if (this.loginModel.password === null || this.loginModel.password === '') {
        this.$message.error('请输入登录密码')
      } else {
        let encryptedPwd = self.getEncryptedPwd(self.loginModel.password)
        self.$axios.post('/api/Account/Login', {account: self.loginModel.account,
          password: encryptedPwd,
          key: self.loginModel.key}, {msg: ''}).then(function (data) {
          if (data.length === 0) {
          } else {
            self.setUserInfo({
              msg_id: 0,
              user_name: data[0].name
            })
            self.$config.token.set('Bearer ' + data[0].token)
            self.$router.push({
              path: '/user'
            })
          }
        })
      }
    },
    ForgetPassword () {
      this.$message.warning('请联系管理员')
    },
    getEncryptedPwd (str) {
      setMaxDigits(129)
      let key = new RSAKeyPair(this.rsaModel.publicKeyExponent, '', this.rsaModel.publicKeyModulus)
      return encryptedString(key, str)
    },
    getKey () {
      let self = this
      this.$axios.get('/api/Account/GetKey').then(function (responce) {
        self.loginModel.key = responce[0].key
        self.rsaModel.publicKeyExponent = responce[0].publicKeyExponent
        self.rsaModel.publicKeyModulus = responce[0].publicKeyModulus
      })
    }
  },
  mounted () {
    this.getKey()
  }
}
</script>
